<template>
  <div class="system-table-container layout-pd">
    <el-card shadow="hover" class="layout-padding-auto">
      <div class="system-table-search">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-button size="default"
                       class="mt10"
                       type="success"
                       :icon="'ele-Plus'"
                       @click="handleAdd"
                       v-auths="['leadmall:comment:add']">新增</el-button>
          </el-col>
        </el-row>
      </div>

      <el-descriptions :column="1"  border style="border-top: none" v-for="item in state.tableData.data" :key="item.id">

        <el-descriptions-item  label-class-name="my-label"  >
          <template #label>
            dddd
          </template>
          <el-descriptions  :column="1" style="width: 800px;border: none">
            <el-descriptions-item label-class-name="my-label1"  class-name="my-content">
              {{ item.createBy }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label1" class-name="my-content">
              <mdEdit v-model="item.mdContent" mode="read"/>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label1">
              <el-tooltip content="回复" placement="top">
                <el-button link type="success" icon="ele-Plus" @click="handleUpdate(item)" v-auths="['leadmall:comment:add']"></el-button>
              </el-tooltip>
              <el-tooltip content="修改" placement="top">
                <el-button link type="primary" icon="ele-Edit" @click="handleUpdate(item)" v-auths="['leadmall:comment:edit']"></el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button link type="danger" icon="ele-Delete" @click="handleDelete(item)" v-auths="['leadmall:comment:remove']"></el-button>
              </el-tooltip>
            </el-descriptions-item>
          </el-descriptions>
        </el-descriptions-item>

      </el-descriptions>
      <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange"
                     class="mt15 paginationFlex" :pager-count="5" :page-sizes="[10, 20, 30]"
                     v-model:current-page="state.tableData.param.pageNum" background
                     v-model:page-size="state.tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="state.tableData.total">
      </el-pagination>
    </el-card>
    <!-- 添加或修改评论对话框 -->
    <CommentDialog ref="commentDialogRef" @refresh="getList()" />
  </div>
</template>
<style scoped>
:deep(.my-label) {
  background: var(--el-color-success-light-9) !important;
  width: 80px;
}
:deep(.my-label1) {
  background: #fff;
}
:deep(.my-content) {
  min-width: 800px;
  width:800px;
}
</style>
<script setup name="Comment" lang="ts">
import {reactive, onMounted, ref, defineAsyncComponent} from "vue";
import { listComment, delComment} from '@/leadmall/api/comment';
import { CommentVO } from '@/leadmall/api/comment/types';
import { ElMessage, ElMessageBox } from 'element-plus';
import mdEdit from "@/components/mdEedit/index.vue";
// 引入组件
const CommentDialog = defineAsyncComponent(() => import("./dialog.vue"));
const commentDialogRef = ref();
// 定义变量内容
const props = defineProps<{
  project: CommentVO;
}>();
const multipleSelection = ref<CommentVO[]>([])
const state = reactive({
  tableData: {
    data: [] as any,
    total: 0 as any,
    loading: false,
    dateRange: [] as any,
    param: {
      pageNum: 1,
      pageSize: 10,
    } as any,
  }
});
/** 查询评论列表 */
const getList = () => {
  state.tableData.loading = true;
  if(props.project?.topicId){
    state.tableData.param.topicId = props.project.topicId;
  }
  listComment(state.tableData.param).then((res)=>{
    if (res.code === 200) {
      state.tableData.data = res.rows;
      state.tableData.total = res.total;
    } else {
      ElMessage.error(res.msg);
    }
  }).catch(() => {
    ElMessage.error('获取数据失败');
  }).finally(() => {
    state.tableData.loading = false;
  });
}
// 分页改变
const onHandleSizeChange = (val: number) => {
  state.tableData.param.pageSize = val;
  getList();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
  state.tableData.param.pageNum = val;
  getList();
};
/** 搜索按钮操作 */
// const handleQuery = () => {
//     getList();
// }
/** 重置按钮操作 */
// const resetQuery = () => {
//     state.tableData.param = {
//         pageNum: 1,
//         pageSize: 10
//     };
//     handleQuery();
// }
/** 新增按钮操作 */
const handleAdd = () => {
  commentDialogRef.value.openDialog("add", props.project);
}
/** 修改按钮操作 */
const handleUpdate = (row?: CommentVO) => {
  commentDialogRef.value.openDialog("edit", row);
}
/** 删除按钮操作 */
const handleDelete = async (row?: CommentVO) => {
  const _ids = row?.id || multipleSelection.value.map((item) => item.id).join(',');
  if (_ids == "") {
    ElMessage.error("请选择要删除的数据");
    return;
  }
  state.tableData.loading= true
  ElMessageBox.confirm('是否确认删除APP信息编号为"' + _ids + '"的数据项？',
      '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
    delComment(_ids);
    ElMessage.success("删除成功");
  }).catch(() => {
    ElMessage.info('已取消删除');
  }).finally(() => {
    getList();
    state.tableData.loading= false
  });

}
onMounted(() => {
  getList();
});
</script>
